<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" left-text="返回" right-text="首页" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" :placeholder="true" :fixed="true" />

        <!-- 功能栏 -->
        <div style="display:flex">
            <van-dropdown-menu active-color="#1989fa" style="width: 50%;">
                <van-dropdown-item v-model="classId" :options="classInfos" @change="changeClass" />
            </van-dropdown-menu>
            <van-cell title="添加资源" is-link @click="showAddresource" style="width: 50%; text-align: center;" />
        </div>
        <!-- 列表展示-->
        <div v-show="show == 0">
            <div role="button" tabindex="0" index="0" v-for="(item, index) in resources" :item="item" :key="index"
                @click="delResourcesView(item)"
                class="van-cell van-cell--clickable van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
                <i class="van-icon van-icon-contact van-cell__left-icon" />
                <div class="van-cell__value van-cell__value--alone van-contact-card__value">
                    <div>资源名称：{{ item.name }}</div>
                    <div>资源类型：{{ item.resourceType == 0 ? '文件' : '链接' }}</div>
                </div>
                <i class="van-icon van-icon-arrow van-cell__right-icon" />
            </div>
        </div>

        <!-- 添加任务信息 -->
        <div v-show="show == 1">
            <van-form @submit="addResources">
                <van-field v-model="name" name="name" label="资源名称" placeholder="资源名称"
                    :rules="[{ required: true, message: '请填写资源名称' }]" />

                <van-field readonly clickable name="resourceType" :value="tempTyep" label="资源类型" placeholder="点击选择资源类型"
                    @click="showPicker = true" />
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>

                <div v-show="resourceType == 1">
                    <van-field v-model="resourceUrl" name="resourceUrl" label="资源链接" />
                </div>

                <div v-show="resourceType == 0">
                    <van-field name="uploader" label="文件上传">
                        <template #input>
                            <van-uploader v-model="uploader" :max-count="1" accept="*.*" />
                        </template>
                    </van-field>
                </div>

                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>

            </van-form>
        </div>

        <!-- 加载动画 -->
        <loading v-if="loadingStatus"></loading>
    </div>
</template>
<script>
import { Toast } from 'vant';
import req from '../../../request/request'
import { uploadFile } from '../../../request/MyFileReq'
export default {
    name: 'ResourcesView',
    data() {
        return {
            name: '',
            resourceType: 3,
            resourceUrl: '',
            uploader: [],
            classId: 1,
            classInfos: [],
            className: '',
            uploader: [],
            loadingStatus: true,

            resources: [],
            show: 0,
            tempTyep: '',
            showPicker: false,
            columns: ['文件', '链接'],
        };
    },
    methods: {
        // 加载切换
        goload() {
            this.loadingStatus = true;
            setTimeout(async () => {
                this.loadingStatus = false;
            }, 300);
        },
        // 添加任务
        addResources(values) {
            // console.log(values)
            var that = this;
            var formData = new FormData();
            formData.append("name",this.name);
            formData.append("resourceType",this.resourceType);
            formData.append("relationClassId",this.classId);
            formData.append("relationTeacherId",this.$store.state.user.id);
            if(this.resourceType == 0){
                formData.append("file",values.uploader[0].file);
            }else{
                formData.append("resourceUrl",this.resourceUrl);
            }
            uploadFile('/api/addResource',formData,function(e){
                // console.log(e)
                Toast("添加成功！")
                that.back();
            })
        },
        onConfirm(value) {
            this.tempTyep = value;
            this.resourceType = value == "文件" ? 0 : 1;
            this.showPicker = false;
        },
        // 获取班级下的资源
        getResourcesByClass() {
            req({
                url: "getResourcesByClass",
                method: "POST",
                data: {
                    relationTeacherId: this.$store.state.user.id,
                    relationClassId: this.classId,
                }
            }).then(res => {
                // console.log(res);
                this.resources = res.data.data;
            }).catch(err => {
                // console.log(err);
            })
        },
        // 删除资源
        delResourcesView(item) {
            this.$dialog.confirm({
                title: "删除模块",
                message: "是否删除：" + item.name,
                theme: 'round-button',
                // 确认按钮
                confirmButtonColor: '#1989fa',
                // 取消按钮
                cancelButtonColor: 'red',
            }).then(res => {
                req({
                    url: "delResources",
                    method: "POST",
                    data: item
                }).then(res => {
                    // console.log(res);
                    Toast("删除成功！")
                    this.back();
                }).catch(err => {
                    // console.log(err);
                })
            }).catch(() => {

            })
        },

        // 展示资源添加页面
        showAddresource() {
            // console.log("取值"+this.resourceType)
            this.show = 1;
            this.goload()
            this.name = ''
            this.resourceUrl = ''
            this.uploader = []
        },
        // 更改班级列表
        changeClass(res) {
            for (var i = 0; i < this.classInfos.length; i++) {
                if (this.classInfos[i].value == res) {
                    this.className = this.classInfos[i].text;
                    this.getResourcesByClass()
                }
            }

        },
        // 获取班级列表
        getClassInfo() {
            req({
                url: "getClassInfo",
                method: "POST",
                data: {
                    id: this.$store.state.user.id
                }
            }).then(res => {
                if (res.data.code == 0) {
                    var data = res.data.data;
                    this.classId = res.data.data[0].id;
                    this.className = res.data.data[0].name;
                    for (var i = 0; i < data.length; i++) {
                        var x = { text: '班级1', value: 0 };
                        x.text = data[i].name;
                        x.value = data[i].id;
                        this.classInfos.push(x);
                    }
                    //发请求 获取当前班级下所有的学生信息
                    this.getResourcesByClass();
                }
            }).catch(err => {
                // console.log(err);
            })
        },
        onClickLeft() {
            if (this.show == 0) {
                this.$router.back(1)
                // console.log("返回首页")
            } else {
                // 返回上一级
                this.back();
            }
        },

        onClickRight() {
            // 回到首页
            this.$router.back(1)
        },
        // 返回方法
        back() {
            this.show = 0;
            this.getClassInfo()
        },

    },

    computed: {
    },
    mounted() {
        this.getClassInfo(),
            setTimeout(async () => {
                this.loadingStatus = false;
            }, 1000);

    },
}
</script>
<style>
.addBatchStudent_box {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>